<template>
  <div class="back">
    <dev class="login">
      <el-card>
      <el-tabs v-model="tab">
        <el-tab-pane label="账号密码" name="pwd">
          <el-form @submit.native.prevent="loginPwd">
            <el-form-item>
              <el-input v-model="account" placeholder="用户名或手机号" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="password" type="password" placeholder="密码" />
            </el-form-item>
            <el-button type="primary" @click="loginPwd" style="width:100%">登录</el-button>
          </el-form>
        </el-tab-pane>
        <!-- <el-tab-pane label="短信验证码" name="sms">
          <el-form @submit.native.prevent="loginSms">
            <el-form-item>
              <el-input v-model="phone" placeholder="手机号" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="code" placeholder="验证码" />
            </el-form-item>
            <el-button type="primary" @click="loginSms" style="width:100%">登录</el-button>
          </el-form>
        </el-tab-pane> -->
      </el-tabs>
      <div style="margin-top:8px;text-align:right">
        <el-link @click="$router.push('/register')">注册</el-link>
      </div>
    </el-card>
  </dev>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return { tab: 'pwd', account: '', password: '', phone: '', code: '' }
  },
  methods: {
    async loginPwd () {
      const { data } = await axios.post('/api/auth/login/password', { account: this.account, password: this.password })
      if (data.code === 1) {
        localStorage.setItem('token', data.data.token)
        this.$router.replace('/')
      } else {
        this.$message.error(data.msg)
      }
    }
  }
}
</script>

<style scoped>
.back {
    background-image: url('../assets/美食图片制作.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.login {
    backdrop-filter: blur(10px);
    padding: 10px;
    width: 400px;
    border-radius: 8px;
}
</style>
